import React, {  useState } from 'react';
import {  Button, Descriptions, Input,message,Spin } from 'antd';
import { useNavigate } from 'react-router-dom';
import { AddMerchant } from '../../api/merchant';
const Addmerchant = () => {
    const navigate = useNavigate();
    const [name, setName] = useState('');  
    const [phone, setPhone] = useState(''); 
    const [contacts, setContacts] = useState(''); 
    const [isButtonDisabled, setIsButtonDisabled] = useState(true); // 初始时禁用按钮  
    const [spinning, setSpinning] = React.useState(false);//加载中
    const add = async () => {
        setSpinning(true);
        await AddMerchant({
            phone: phone,
            name: name,
            contacts:contacts
        }).then((res) => {
            if (res.result === 0) {
                setSpinning(false);
                message.success('添加成功', 1.5);
                 navigate(`/merchant`);
            }
        })

    }
    const handleNameChange = (e) => {  
        setName(e.target.value);  
       
    };  
    const handleContactsChange = (e) => { 
        const value = e.target.value;  
        setContacts(value);  
        setIsButtonDisabled(value.length ==='');
       
    };  
  
    const handlePhoneChange = (e) => {  
        const value = e.target.value;  
        setPhone(value); 
        //  setIsButtonDisabled(value.length !== 11); 
    };  
    const items = [
        {
            key: '1',
            label: '名称',
            children: <Input placeholder="请输入名称" onChange={handleNameChange} value={name} />,
        },
        {
            key: '2',
            label: '电话',
            children: <Input placeholder="请输入电话号码" onChange={handlePhoneChange}  onBlur={handlePhoneChange} value={phone}/>,
            span: 2,
        },
        {
            key: '3',
            label: '联系人',
            children: <Input  onChange={handleContactsChange}  onBlur={handleContactsChange} value={contacts}/>,
            span: 1.5,
        },
        {
            key: '4',
            label: '',
            children: '',
            span: 1.5,
        },
        {
            key: '5',
            label: '行为',
            children: <Button type="primary" onClick={() => add()}  disabled={isButtonDisabled}>新增</Button>,
            span: 3,
        },

    ]; 
    return (
        <div>
              <Descriptions title="新增商户" layout="vertical" bordered items={items} />
              <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    );
};
export default Addmerchant;